import { Content, Header,Sider,Footer, Splitter } from "@components/FrameBox";
import { Debugger } from "@composites/DevTools";
import { Frame } from "@composites/Frame";
import { RootViewPort } from "@composites/RootViewport";
import { ShortcutLock } from "@composites/ShortcutLock";
import { createRoot } from "react-dom/client";

createRoot(document.getElementById('root')!).render(
  <Frame
      features={[Content,RootViewPort,ShortcutLock,Debugger]}
      style={{
          backgroundColor: 'lightblue'
      }}
  >
    <Header>
      <Sider>Sider</Sider>
      <Content>Header</Content>
      <Sider>Sider</Sider>
    </Header>
    <Content>
      <Sider>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
      </Sider>
      <Header>Header</Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
      <Sider>Sider</Sider>
    </Content>
    <Footer>
      <Sider>leftSider</Sider>
      <Content>Footer</Content>
      <Sider>Sider</Sider>
      {/* Footer */}
    </Footer>
    <Sider>
      <Header>Header</Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Sider>
  </Frame>
);